<template>
      <a href="javascript:void(0)" @click="logout" class="logout-link">
        <el-icon class="logout-icon">
          <SwitchButton />
        </el-icon> 
            退出登录[{{ loginName }}]
      </a>
      <!-- 页面标题 -->
    <h4 class="page-title">反馈任务列表</h4>
    <div class="feedback-task-list">
        <div class="container">
            <!-- 任务列表区域 -->
            <el-table :data="taskList" border style="width: 100%" size="small"
                :header-cell-style="{ background: '#f8f9fa', color: '#666' }">
                <!-- 等级标签列 -->
                <el-table-column label="等级" width="60" align="center">
                    <template #default="scope">
                        <div :class="['level-tag', `level-tag-${scope.row.levelText}`]" :title="scope.row.levelText">
                            {{ scope.row.levelText }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="地址">
                    <template #default="scope">
                        <div class="address-container">
                            <!-- 省、市和时间放在同一行 -->
                            <div class="address-header">
                                <span class="province-city">{{ scope.row.gridProvince }} {{ scope.row.gridCity }} {{
                                    scope.row.feedbackTime }}</span>
                            </div>
                            <!-- 详细地址显示在下方，使用小字体 -->
                            <div class="detail-address">{{ scope.row.address }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="action" label="操作" width="100" align="center">
                    <template #default="scope">
                        <el-button type="primary" plain size="small" class="custom-btn" @click="goToCheck(scope.row)">
                            <el-icon style="font-size: 14px;">
                                <Right />
                            </el-icon>
                            <span style="vertical-align: middle"> 去检测 </span>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup>
import { ElTable, ElTableColumn, ElButton, ElIcon, ElMessage ,ElMessageBox} from 'element-plus'
import { ArrowLeft, Right } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { getfeedbackTaskApi } from '@/api/feedbacktask'
import { useRouter } from 'vue-router'
import { getWorkerNameApi } from '@/api/getworkername'


const loginName = ref('')
const data = ref([])
const router = useRouter()
// 数字转中文等级
const getLevelText = (level) => {
    const levelMap = {
        1: '一',
        2: '二',
        3: '三',
        4: '四',
        5: '五',
        6: '六',
    }
    return levelMap[level] || '未知'
}

// 获取数据并转换
const queryAll = async () => {
    try {
        const result = await getfeedbackTaskApi()
        console.log('result', result)
        if(result.code === 401){
            ElMessage.error(result.message)
            // router.push('/')
        }
        else if (result.code == 404) { 
            ElMessage.error(result.message)
             router.push('/')
        }
        if (!Array.isArray(result.data)) {
            taskList.value = []
            console.error('接口返回非数组数据:', result.data)
            return
        }

        taskList.value = result.data.map(item => ({
            ...item,
            levelText: getLevelText(item.estimatedAqiLevel),
        }))
    } catch (error) {
        console.error('获取数据失败:', error)
        ElMessage.error('加载失败，请重试')
    }
    console.log('数据:', taskList.value)
}

onMounted(async () => {
    queryAll()
    try {
        const result = await getWorkerNameApi()
        loginName.value = result.data
    } catch (error) {
        console.error('获取姓名失败:', error)
        ElMessage.error(result.message) 
    }
})

const taskList = ref([])

const logout = () => {
  //弹出确认框, 如果确认, 则退出登录, 跳转到登录页面
  ElMessageBox.confirm('确认退出登录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {//确认, 则清空登录信息
    ElMessage.success('退出登录成功')
    localStorage.removeItem('loginUser')
    router.push('/login')//跳转到登录页面
  })
}
const goToCheck = (row) => {
    // 将 id 存储到 localStorage，键名可自定义，比如 "selectedId"
    localStorage.setItem("selectedId", row.id)
    router.push({path: '/measure',});
}


</script>

<style scoped>

.logout-icon{
    font-size: 12px;
}
/* 去掉 a 标签下划线、设置白色 */
.logout-link {
    text-decoration: none;
    position: absolute;
    font-size: 14px;
    font-family: 楷体;
    top: 25px;
    right: 10px;
    cursor: pointer;
    margin-bottom: 20px;
    color: rgb(13, 124, 228);
    padding-top: -10px;
    border-radius: 4px;
    transition: all 0.3s ease;
}


.custom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 页面整体样式 */
.feedback-task-list {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url('@/assets/1.png') no-repeat center/cover;
    position: relative;
    padding-top: 150px;
    margin-top: 15px;
    box-sizing: border-box;
}


.back-icon:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* 页面标题样式 */
.page-title {
    text-align: center;
    margin: 0 auto;
    margin-top: 12px;
}

/* 内容容器样式 
   修改 max-width 让容器更宽，比如从 400px 改到 600px ，也可根据需求调整为更大值或去掉 max-width 直接用 width: 90%; 自适应 */
.container {
    width: 97%;
    /* 调整最大宽度，让容器更宽 */
    max-width: 600px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
    box-sizing: border-box;
    margin-top: 80px;
}


/* 地址容器样式 */
.address-container {
    display: flex;
    flex-direction: column;
    /* 居左 */
    align-items: flex-start;
}

/* 地址头部样式（省、市和时间） */
.address-header {
    margin-bottom: 2px;
}

/* 省和市样式 */
.province-city {
    font-weight: bold;
    font-size: 10px;
    color: #333;
}

/* 时间样式 */
.time {
    font-size: 10px;
    color: #999;
}

/* 详细地址样式 */
.detail-address {
    font-size: 8.5px;
    color: #666;
    line-height: 1.4;
    /* 居左 */
    align-items: flex-start;
    text-align: left;
    /* 文本居左 */
}

/* 表格单元格样式调整 */
.el-table td {
    padding: 12px 8px;
}

.level-tag {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
}

/* 等级样式（匹配中文后缀） */
.level-tag-一 {
    background-color: #52c41a;
}

.level-tag-二 {
    background-color: #a0d911;
}

.level-tag-三 {
    background-color: #faad14;
}

.level-tag-四 {
    background-color: #f5222d;
}

.level-tag-五 {
    background-color: #eb2f96;
}

.level-tag-六 {
    background-color: #722ed1;
}
</style>